<template>
	<view class="wrap u-p-l-50 u-p-r-50">
		<u-navbar :title="treeDetail.name" :background="{backgroundColor: '#344333'}" :custom-back="close" :title-color="'#fff'"
		 :back-icon-color="'#fff'" :back-text-style="{color: '#fff'}">
		</u-navbar>
		<!-- <view style="position:absolute;top:40px;height:20px;width:100%;z-index:1000;background: #344333;left: 0;"></view> -->
		<view class="card" v-if="treeDetail.pkid && params.type == 1">
			<view class="img">
				<u-image :src="$u.http.config.baseUrl+ (JSON.parse(treeDetail.plantPicture)[0].url)" width="100%" height="100%" mode=""></u-image>
			</view>
			<view class="u-flex flex-wrap">
				<view class="content" style="width:100px;">
					<view class="title">树种</view>
					<view class="name u-line-1">{{treeDetail.name}}</view>
				</view>
				<view class="content">
					<view class="title">需要能量</view>
					<view class="name u-line-1">{{treeDetail.energy}}g</view>
				</view>
				<view class="content">
					<view class="title">种植区域</view>
					<view class="name u-line-1">{{treeDetail.garden}}</view>
				</view>
			</view>
			<view class="detail-text" style="word-wrap: break-word;height:120px;overflow:auto;">
				{{treeDetail.description}}
			</view>
			<view class="u-m-t-30 u-m-b-40">
				<u-button @click="applayTree" style="background:#488EF5;height:38px;" shape="circle" type="primary" :disabled="!canClick">
						申请种树
				</u-button>
			</view>
			<view class="bottom"></view>
			<view class="u-m-t-10 u-text-left" style="color:#999999">
				*树苗由{{treeDetail.sponsor}}在{{params.city === "市辖区" ? params.province : params.city}}组织种植并养护。
			</view>
			<view  class="u-p-t-40">
				<u-image style="margin:0 auto;" :src="$u.http.config.baseUrl+ (JSON.parse(treeDetail.sponsorLogo)[0].url)" width="80" height="80" mode="widthFix"></u-image>
			</view>
		</view>
		<view v-if="treeDetail.pkid && params.type == 2" class="card">
			<view class="img">
				<u-image :src="$u.http.config.baseUrl+ (JSON.parse(treeDetail.url)[0].url)" width="100%" height="100%" mode=""></u-image>
			</view>
			<view class="u-flex flex-wrap">
				<view class="content" style="width:100px;">
					<view class="title">守护</view>
					<view class="name u-line-1">{{treeDetail.name}}</view>
				</view>
				<view class="content">
					<view class="title">需要能量</view>
					<view class="name u-line-1">{{params.energy}}g</view>
				</view>
				<view class="content">
					<view class="title">种植区域</view>
					<view class="name u-line-1">{{treeDetail.city}}</view>
				</view>
			</view>
			<!-- <view class="u-text-center u-font-12 u-m-b-20" style="color: #488EF5">共有1500棵枣树需要守护</view> -->
			<view class="detail-text" style="word-wrap: break-word;height:120px;overflow:auto;">
				{{treeDetail.story}}
			</view>
			<view class="u-m-t-30 u-m-b-60">
				<u-button @click="showGuard = true" :style="{opacity: Number(params.needEnergy) > 0 ? '.5' :1}" style="background:rgb(61, 158, 106)!important;height:38px;" shape="circle" type="primary" :disabled="!canClick">
						我要守护
				</u-button>
			</view>
			<view class="u-m-t-10  u-text-left" style="color:#999999;">
				*树苗由{{treeDetail.sponsor}}在{{params.city === "市辖区" ? params.province : params.city}}组织种植并养护。
			</view>
			<view class="u-p-t-40">
				<u-image style="margin:0 auto;" :src="$u.http.config.baseUrl+ (JSON.parse(treeDetail.logoUrl)[0].url)" width="60" height="60" mode="widthFix"></u-image>
			</view>
			
		</view>
		<u-modal @confirm="confirmTree" v-model="show" title="" :show-title="false" show-cancel-button confirm-text="我要种植" cancel-text="暂不种植">
			<view class="slot-content">
				<view class="u-text-right u-p-r-30 u-p-t-20"><u-icon name="close" size="40" color="#999" @click="closeModal"></u-icon></view>
				<view><u-image style="margin:0 auto;" src="/static/img//loveforest/info.png" width="50" height="50" mode="aspectFit"></u-image></u-icon></view>
				<view class="u-text-center u-p-t-30 u-p-b-50 u-p-l-30 u-p-r-30">是否使用{{params.energy}}g碳汇能量种植{{treeDetail.name}}</view>
			</view>
		</u-modal>
		<u-modal @confirm="confirmTreeGuard" v-model="showGuard" title="" :show-title="false" show-cancel-button confirm-text="我要守护" cancel-text="暂不守护">
			<view class="slot-content">
				<view class="u-text-right u-p-r-30 u-p-t-20"><u-icon name="close" size="40" color="#999" @click="closeModal"></u-icon></view>
				<view><u-image style="margin:0 auto;" src="/static/img//loveforest/info.png" width="50" height="50" mode="aspectFit"></u-image></u-icon></view>
				<view class="u-text-center u-p-t-30 u-p-b-50 u-p-l-30 u-p-r-30">当前守护需要<span style="color: #2B85E4">{{params.energy}}g</span> 能量</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				treeDetail: {},
				canClick: true,
				show:false,
				showGuard: false,
				params: {}
			}
		},
		onLoad (option) {
			this.params = option
			this.init(option)
			if(Number(option.needEnergy) > 0) {
				this.canClick = false
			}
		},
		methods: {
			init (option) {
				if(option.type == 1) {
					this.$u.api.forestTreeDetail({id:option.pkid}).then(res => {
						console.log(res)
						this.treeDetail = res
					})
				}else{
					this.$u.api.forestTreeGuard({id:option.pkid}).then(res => {
						console.log(this.params)
						this.treeDetail = res
					})
				}
				
			},
			close () {
				uni.navigateBack()
			},
			closeModal () {
				this.show = false
				this.showGuard = false
			},
			applayTree () {
				this.show = true
			},
			confirmTree () {
				this.$u.api.forestTreeApplay({id:this.treeDetail.pkid}).then(res => {
					this.$u.route('pages/work/apply/loveforest/personal_garden/planting_trees/planting_success', {id: res,...this.params})
				}).catch(res => {
					this.$u.toast(res.msg)
				})
				
			},
			confirmTreeGuard () {
				this.$u.api.applayTreeGuard({id:this.treeDetail.pkid}).then(res => {
					this.$u.route('pages/work/apply/loveforest/personal_garden/planting_trees/planting_success', {id: res.data,...this.params})
				}).catch(res => {
					this.$u.toast(res.msg)
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	// uni-page-body {
	// 	height: 100%;
	// 	background: #344333;
	// }
	/deep/ .u-border-bottom:after {
		border: none;
	}
	.wrap {
		min-height: 100vh;
		background: #344333;
		padding-top: 100px!important;
		padding-bottom:100px;
		.card {
			width: 100%;
			border-radius: 10px;
			min-height: 450px;
			background: #fff;
			position: relative;
			padding: 80px 20px 10px 20px;
			.img {
				width: 100px;
				height: 100px;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: -50px;
				border-radius: 50%;
				overflow:hidden;
				
			}
			.detail-text {
				color: #999999;
				line-height: 38rpx;
				font-weight: 400
			}
			.flex-wrap {
				margin-bottom: 20px;
				.content{
					text-align:center;
					.title {
						color: #666;
						font-size: 26rpx;
						padding-bottom: 10px;
					}
					.name {
						color: #333;
						font-size: 36rpx;
						font-weight: bold;
					}
				}
				.content:nth-child(1) {
					width: 20%
				}
				.content:nth-child(2) {
					width: 40%
				}
				.content:nth-child(3) {
					width: 40%
				}
			}
			.bottom {
				border-top: 2px solid #979797;
				opacity: 0.1;
			}
		}
	}
	
</style>
